




HTML <area> tag
Description:
The <area> tag defines the clickable areas or active areas inside the image-map which are associated with the hyperlinks.  If you click on those areas then it will perform some action such as open a new image, new URL, etc. This tag is always used with <map> element. 
Inside an image map different areas can be hyperlinked to various locations using multiple <area> elements in a single <map> element. 
The <area> element is defined with (required) attributes shape and coords. The shape attribute specifies the shape of the area such as rectangle, circle, square, and polygon. The coords attribute defines the coordinates of areas inside the image.
What is Image-map
An image-map is defined as a graphical image with active areas so that when user click on those area, it can link to different destinations. To define an image-map, we require the following things:

An HTML <img> element with usemap attribute which defines a valid map name.
HTML <map> element with name attribute whose value must be same as usemap
One or more <area> elements inside a <map> element which create clickable areas in an image-map.

Syntax


    <area shape="" coords="" href="">


Following are some specifications about the HTML <area> tag


Display
Block


Start tag/End tag
Only start tag(End tag forbidden) 


Usage
Image Map


Example


<!DOCTYPE html>

<html>

 <head>

<title>HTML Area tag</title>

<style>

  body{

  margin-left: 250px;}

</style>

  </head>

 <body>

 <h2>Example of HTML Area tag</h2>

<img src="image1.png" usemap="#web">

<map name="web">

<area shape="rect" coords="66,117,131,168" href="https://www.javatpoint.com/html-tutorial">

<area shape="rect" coords="199,36,277,85" href="https://www.javatpoint.com/css-tutorial">

<area shape="rect" coords="330,107,406,159" href="https://www.javatpoint.com/bootstrap-tutorial">

<area shape="rect" coords="199,185,267,236" href="https://www.javatpoint.com/javascript-tutorial">

 </map>

 </body>

</html>





Attribute:
Tag-specific attributes:


Attribute
Value
Description


alt
text
An alternative text String to display on the browser if it does not display the image.


coords
x1,y1,x2,y2(rect)
Defines coordinates for the upper left and lower right of a rectangle.


x,y, radius(circle)
Defines coordinates for the circle.


x1,y1,x2,y2,x3,y3,..(polygon)
Defines the polygon vertices.


href
href
URL	It determines the hyperlink destination for the active area.


target
_blank
Open link in a new window


_parent
Open link in the parent frame


_self
Open link in current window


_top
Open link with full width in the same window


frame_name
In the frame. (Not supported in HTML5)


shape
default
It defines the default area(rectangular).


rect
It defines the rectangular area.


circle
Defines the circular area.


poly
Defines the polygonal.


download
filename
Defines that hyperlink, which is used for downloading the resource. 


rel
alternate

author

bookmark

help

license

next

nofollow

noreferrer

prefetch

prev

search

tag
It defines the relationship between current and linked document.


hreflang
language_code
It specifies the language of the linked resource.


type
media_type  
It specifies the MIME type of linked source.(Not supported in HTML5)


Global attribute:
The <area> tag supports the global attributes in HTML
Event attribute:
The <area> tag supports the event attributes in HTML. 
Supporting Browsers

Element Chrome IE Firefox Opera Safari
<area>YesYesYesYesYes














Please Share





